<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>
<script>
    let {createApp, h, reactive, ref} = VueRuntimeDom
    let App = {
        setup() {
            let flag = ref(true)

            setTimeout(() => {
                flag.value = false
            }, 1000)

            return () => {
                return flag.value ?
                    h("div", {style: {color: "red", "font-size": "25px"}}, [
                        h("li", {key: "a"}, "a"),
                        h("li", {key: "b"}, "b"),
                        h("li", {key: "e"}, "e"),
                        h("li", {key: "f"}, "f"),
                        h("li", {key: "g"}, "g"),
                        h("li", {key: "l"}, "l"),
                        h("li", {key: "k"}, "k"),
                        h("li", {key: "c"}, "c"),
                        h("li", {key: "d"}, "d"),
                    ]) :
                    h("div", {style: {color: "blue"}}, [
                        h("li", {key: "a"}, "a"),
                        h("li", {key: "b"}, "b"),
                        h("li", {key: "g"}, "g"),
                        h("li", {key: "e"}, "e"),
                        h("li", {key: "f"}, "f"),
                        h("li", {key: "h"}, "h"),
                        h("li", {key: "c"}, "c"),
                        h("li", {key: "d"}, "d"),
                    ])
            }
        }
    }
    const app = createApp(App)
    app.mount("#app")
</script>
</body>
</html>